<template>
  <div style="background-color: #f1f1f1;height: auto;padding-bottom: 60px">
    <IndexNavMenu></IndexNavMenu>
    <div class="qa_main" style="width:1200px;margin:20px auto;position: relative">
      <div class="qa_breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'class'}">课程</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'learn', query: { courseId: courseData.courseId }}" style="cursor: pointer">{{courseData.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="question_Main">
        <div class="left_main">
          <div class="question_show">
            <div class="question_user_info">
              <div class="user_info di">
                <el-avatar :size="50" :src="questionData.imageUrl" style="float: left"></el-avatar>
                <span style="float: left;padding-left: 20px">{{questionData.nickname}}</span>
              </div>
              <div class="option_div di" style="float: right">
                <div class="s_div_padding di">
                  <i class="el-icon-star-off" v-if="questionData.isFollow==0" @click="toFollow" style="cursor:pointer;">关注</i>
                  <i class="el-icon-star-on" style="color: #ffa500;font-size: 20px" v-else>
                    <span style="color: #2b333b;font-size: 18px">已关注</span></i>
                </div>
<!--                <div class="s_div_padding di edit_btn" v-if="questionData.isSelf==0">-->
<!--                  <i class="el-icon-edit">编辑</i>-->
<!--                </div>-->
              </div>
            </div>
            <div>
              <div style="font-weight: bold">
                {{questionData.title}}
              </div>
              <div>
                <p v-html="questionData.content"></p>
              </div>
            </div>
            <div>
              <div class="s_div_padding di">
                {{questionData.createTime}}
              </div>
              <div class="s_div_padding di" style="padding-left: 30px">
                源自：<a>{{questionData.sectionTitle}}</a>
              </div>
              <div class="s_div_padding di" style="float: right">
                {{questionData.answerSize}}回答
              </div>
            </div>
          </div>
          <div class="answer_show">
            <div v-for="(aitem, index) in answerList" :key="aitem.answerId" style="border-bottom: 1px solid #dddddd;padding: 10px 0px">
              <div>
                <div class="di image" >
                  <el-avatar :size="50" :src="aitem.fImageUrl"></el-avatar><br>
                  <span>{{aitem.fNickname}}</span>
                </div>
                <div class="di content_div" >
                  <div style="min-height: 80px">
                    <p v-html="aitem.content"></p>
                  </div>
                  <div>
                    <div class="di">
                      {{aitem.createTime}}
                    </div>
                    <div class="di" style="float:right">
                      <span></span>
                      <i class="el-icon-chat-dot-square" style="margin-left: 20px;cursor: pointer" @click="toCreateAnswer(index)">
                        <span style="padding-left: 5px">回复</span>
                      </i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="child_div" v-if="aitem.children!=null">
                <div v-for="la in aitem.children" :key="la.answerId" style="border-top: 1px solid #dddddd; padding-top: 20px;margin-top: 10px" >
                  <div class="di image" >
                    <el-avatar :size="50" :src="la.fImageUrl"></el-avatar><br>
                  </div>
                  <div class="di " style="width: 960px" >
                    <div>
                      <span>{{la.fNickname}}</span>
                      <span style="color: gray" v-if="la.replyUserId!=null">回复 {{la.tNickName}}:</span>
                    </div>
                    <div>
                      <div style="min-height: 80px;margin-top: 10px">
                        <span>{{la.content}}</span>
                      </div>
                      <div>
                        <div class="di">
                          {{la.createTime}}
                        </div>
                        <div class="di" style="float:right">
                          <span></span>
                          <i class="el-icon-chat-dot-square" style="margin-left: 20px;cursor: pointer" @click="toCreateAnswerLevel(index, la.answerId, la.fUserId, la.fNickname)">
                            <span style="padding-left: 5px">回复</span>
                          </i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="qa_reply" v-if="aitem.createAnswer">
                <div style="border-top: 1px solid #dddddd; padding-top: 20px;margin-top: 10px">
                  <div class="di image" >
                    <el-avatar :size="50" :src="user.imageUrl"></el-avatar><br>
                    <span>{{user.nickname}}</span>
                  </div>
                  <div class="di " style="width: 960px" >
                    <div>
                      回复:{{aitem.replyNickname}}
                    </div>
                    <el-input
                      type="textarea"
                      placeholder="请输入内容"
                      v-model="aitem.newAnswerContent"
                      :rows="3"
                      maxlength="50"
                      show-word-limit
                    >
                      <i slot="suffix" class="el-input__icon el-icon-date"></i>
                    </el-input>
                    <div style="text-align: right;margin-top: 10px">
                      <el-button size="small" @click="cancleCreateAnswer(index)">取消</el-button>
                      <el-button size="small" type="success" @click="submitChildrenAnswer(index)">发布</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div style="text-align: left;margin: 10px 0px">
              <span style="font-size: 30px">回答问题：</span>
              <div style="display: inline-block;float: right">
                <el-button type="success" @click="submitAnswer">提交答案</el-button>
              </div>
            </div>
            <div>
            <div style="" class="createDiv">
              <Editor type="qa" ref="editor" @getContent="getContent"></Editor>
            </div>
            </div>
          </div>
        </div>
        <div class="right_main"></div>
      </div>
    </div>
  </div>
</template>

<script>
import IndexNavMenu from '../../common/IndexNavMenu'
import {mapState} from 'vuex'
import Editor from '../../common/Editor'
export default {
  name: 'QADetail',
  components: {Editor, IndexNavMenu},
  data () {
    return {
      questionId: this.$route.query.questionId,
      courseData: {},
      questionData: {
        questionId: '',
        nickname: '',
        imageUrl: '',
        // isFollow为0 表示未关注
        isFollow: '',
        // isSelf为0 表示是自己的
        isSelf: ''
      },
      answerList: [],
      content: '',
      ccontent: ''
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getDetail()
    this.getAnswer()
    this.getCourse()
  },
  methods: {
    getDetail () {
      var _this = this
      var queryData = {}
      queryData.questionId = this.questionId
      queryData.userId = this.user.userId
      this.$axios.post('/api/question/getDetail',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.questionData = data.result
        }
      })
    },
    getAnswer () {
      var _this = this
      this.$axios.post('/api/answer/getListAnswer',
        this.$qs.stringify({
          answerQueryData: JSON.stringify({
            questionId: this.questionId
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          for (var i = 0; i < data.result.length; i++) {
            data.result[i].createAnswer = false
            data.result[i].newAnswerContent = ''
          }
          _this.answerList = data.result
        }
      })
    },
    getContent (value) {
      this.content = value
    },
    submitAnswer () {
      var _this = this
      this.$axios.post('/api/answer/add',
        this.$qs.stringify({
          answerData: JSON.stringify({
            userId: this.user.userId,
            questionId: this.questionId,
            content: this.content,
            level: 1
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$message({
            type: 'success',
            message: '成功'
          })
          _this.$refs.editor.setContent('')
        } else {
          _this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    },
    toCreateAnswer (index) {
      this.answerList[index].createAnswer = true
    },
    toCreateAnswerLevel (index, replyAnswerId, replyUserId, replyNickname) {
      this.answerList[index].createAnswer = true
      this.answerList[index].replyAnswerId = replyAnswerId
      this.answerList[index].replyUserId = replyUserId
      this.answerList[index].replyNickname = replyNickname
    },
    cancleCreateAnswer (index) {
      this.answerList[index].createAnswer = false
      this.answerList[index].newAnswerContent = ''
    },
    submitChildrenAnswer (index) {
      var _this = this
      var newAnswer = {}
      newAnswer.userId = this.user.userId
      newAnswer.questionId = this.questionId
      newAnswer.content = this.answerList[index].newAnswerContent
      newAnswer.level = 2
      newAnswer.replyAnswerId = this.answerList[index].replyAnswerId
      newAnswer.replyUserId = this.answerList[index].replyUserId
      newAnswer.parentAnswerId = this.answerList[index].answerId
      this.$axios.post('/api/answer/add',
        this.$qs.stringify({
          answerData: JSON.stringify(newAnswer)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$message({
            type: 'success',
            message: '成功'
          })
          _this.answerList[index].createAnswer = false
          _this.answerList[index].newAnswerContent = ''
        } else {
          _this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    },
    getCourse () {
      var _this = this
      this.$axios.post('/api/course/getCourseByQId',
        this.$qs.stringify({
          questionId: this.questionId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.courseData = data.result
        }
      })
    },
    toFollow () {
      var _this = this
      this.$axios.post('/api/question/addFollow',
        this.$qs.stringify({
          followData: JSON.stringify({
            questionId: this.questionId,
            userId: this.user.userId
          })
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$message({
            type: 'type',
            message: '关注成功！'
          })
          _this.questionData.isFollow = 1
        } else {
          _this.$message({
            type: 'error',
            message: '失败，请您再次尝试！'
          })
        }
      }).catch(function () {
        _this.$message({
          type: 'error',
          message: '失败，请您再次尝试！'
        })
      })
    }
  }
}
</script>

<style scoped>
  .createDiv{
    width: 100%;
    background-color: #FFF;
    height: 200px;
    padding-bottom: 42px;
  }
  .qa_main {

    background-color: #f1f1f1;
  }
  .qa_main .qa_breadcrumb{
    margin: 20px 0px;
  }
  .qa_main .question_Main{
    text-align: left;
  }
  .qa_main .question_show{
    padding: 20px;
    border-bottom: 1px solid #dddddd;
  }
  .question_show .question_user_info{
    margin-bottom: 10px;
  }
  .di {
    display: inline-block;
  }
  .option_div .s_div_padding{
    padding: 0px 20px;
  }
  .option_div .edit_btn{
    border-left: 1px solid gray;
  }
  .option_div .edit_btn {
    color: gray;
    cursor: pointer;
  }
  .option_div .edit_btn:hover {
    color: #000;
  }
  .answer_show .image{
    text-align: center;
    padding: 0px 20px;
    float: left;
    width: 80px
  }
  .answer_show .content_div{
    width: 1080px
  }
  .qa_reply {
    padding-left: 120px;
  }
  .child_div {
    padding-left: 120px;
  }
</style>
